<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生登记</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/style/style.css"/>
    <script src="/layui/layui.js"></script>
</head>
<body>
<div class="user-list">
    <blockquote class="layui-elem-quote">
        <form class="layui-form layui-row layui-col-space16">
            <div class="layui-col-md2">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="userNum" placeholder="学号" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-wrap">
                    <input type="text" name="userName" placeholder="姓名" lay-affix="clear" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md2">
                <select name="roleId">
                    <option value="">请选择角色</option>
                    <option value="1">管理员</option>
                    <option value="2">宿管</option>
                    <option value="3">学生</option>
                </select>
            </div>
            <div class="layui-btn-container layui-col-md2">
                <button class="layui-btn" lay-submit lay-filter="user-search">搜索</button>
                <button type="button" class="layui-btn layui-btn-normal" lay-on="user-add">添加</button>
            </div>
        </form>
    </blockquote>
    <table class="layui-hide" id="user" lay-filter="user"></table>

    <!--编辑或添加-->
    <div id="edit-add">
        <form class="layui-form layui-row layui-col-space16">
            <div class="layui-col-md2">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="userNum" placeholder="学号" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-input-wrap">
                    <input type="text" name="userName" placeholder="姓名" lay-affix="clear" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md2">
                <select name="roleId">
                    <option value="">请选择角色</option>
                    <option value="1">管理员</option>
                    <option value="2">宿管</option>
                    <option value="3">学生</option>
                </select>
            </div>
            <div class="layui-btn-container layui-col-md2">
                <button class="layui-btn" lay-submit lay-filter="user-search">搜索</button>
                <button type="button" class="layui-btn layui-btn-normal" lay-on="user-add">添加</button>
            </div>
        </form>
    </div>


    <script type="text/html" id="userBar">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </div>
    </script>
    <script>
        layui.use(['table', 'form', 'laydate','util'], function () {
            let table = layui.table;
            let form = layui.form;
            let util = layui.util;
            // 创建表格实例
            table.render({
                elem: '#user',
                url: '/user/list',
                // where: {userNum: 1, userName: 'aa', roleId: 1, state: 0},
                cols: [[
                    {field: 'userId', title: '编号', sort: true},
                    {field: 'userNum', title: '学号'},
                    {field: 'userName', title: '姓名', sort: true},
                    {field: 'roleId', title: '角色',templet:d=>d.roleId===1?'管理员':(d.roleId===2?'宿管':'学生')},
                    {field: 'state', title: '状态',templet:d=>d.state===0?'启用':'禁用'},
                    {field: 'createTime', title: '创建时间', sort: true},
                    {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#userBar'}
                ]],
                page: true,
                height: 'full-135'
            });
            // 搜索提交
            form.on('submit(user-search)', function (data) {
                let field = data.field; // 获得表单字段

                // 执行搜索重载
                table.reload('user', {
                    page: {curr: 1 },
                    where: field // 搜索的字段
                });
                return false; // 阻止默认 form 跳转
            });

            // 添加
            util.on('lay-on',{
                'user-add':function(_this){
                    layer.open({
                        title: '编辑 - id:',
                        type: 1,
                        area: ['80%', '80%'],
                        content: document.querySelector("#edit-add").innerHTML
                    });
                }
            });


            table.on('tool(user)', function(obj){
                let field = obj.field; // 得到字段
                let value = obj.value; // 得到修改后的值
                let data = obj.data; // 获得当前行数据

                if(obj.event === 'edit') {
                    layer.open({
                        title: '编辑 - id:' + data.userName,
                        type: 1,
                        area: ['80%', '80%'],
                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                    });
                }else if(obj.event === 'del'){
                    layer.msg('删除测试')
                }
            })
        });

    </script>
</div>


</body>
</html>